import React, {ReactNode} from 'react'
import {
  Dialog as MuiDialog,
  DialogContent,
  styled,
  IconButton,
  DialogProps as MuiDialogProps,
} from '@mui/material'

import {ReactComponent as CloseSvg} from '@/assets/imgs/close.svg'

const StyledDialogContent = styled(DialogContent)`
  padding: 60px 40px 60px;
`

const CloseButton = styled(IconButton)`
  position: absolute;
  right: 20px;
  top: 20px;
  padding: 0;
`

interface DialogProps {
  open?: boolean
  onClose?: () => void
  children?: ReactNode
  TransitionProps?: MuiDialogProps['TransitionProps']
  showCloseButton?: boolean
}

const Dialog = ({
  open,
  onClose,
  children,
  TransitionProps,
  showCloseButton = true,
}: DialogProps) => {
  return (
    <MuiDialog
      open={open || false}
      onClose={onClose}
      TransitionProps={TransitionProps}
      PaperProps={{
        sx: {
          backgroundColor: '#111303',
          backgroundImage: 'unset',
          border: '1px solid rgba(191, 255, 11, 0.2)',
        },
      }}
    >
      {showCloseButton && (
        <CloseButton onClick={onClose}>
          <CloseSvg />
        </CloseButton>
      )}

      <StyledDialogContent>{children}</StyledDialogContent>
    </MuiDialog>
  )
}

export default Dialog
